import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import axios from '../../api/index'
import { NavBar, Collapse, InfiniteScroll, Switch } from 'antd-mobile'
import MyList from '../../components/MyList/index'
import Websock from '../../components/Websock/index'
function index() {
  const nav=useNavigate()
  const [list, setList] = useState([])
  const [isSpeed, setIsSpeed] = useState(false)
  const [isSeat, setIsSeat] = useState(false)
  const [page, setPage] = useState(1)
  const { state } = useLocation()
  const { start, end } = state
  const getData = () => {
    axios.post('/trip/train', { start, end, isSpeed, isSeat, page }).then(res => {
      console.log(res)
      setList(list.concat(res.data.data))
      setPage(page+1)
    })
  }
  useEffect(() => {
    getData()
  }, [])
  const go=(val)=>{
    console.log(val)
    nav('/detail',{state:val})
  }
  return (
    <div>
      <NavBar>
        {start}-{end}
      </NavBar>
      <Collapse> 
        {
          list?.map((v, i) => {
            return(
            <Collapse.Panel key={i} title={{start} - {end}}>
            <div key={i}style={{height:'10vh'}}>
            <dl style={{display:'flex',justifyContent:'space-evenly'}}
              onClick={()=>go(v)}
            >
              <dt>
                {v.start}-{v.end}
              </dt>
              <dd>
                <div>是否有票{v.isSeat?'有':'无'}</div> 
                <div>是否高铁{v.isSpeed?'有':'无'}</div>
              </dd>
              <dd>
                <div>商务座：{v.tick.vip}</div>
                <div>一等座：{v.tick.firstTick}</div>
                <div>二等座：{v.tick.secondTick}</div>
              </dd>
            </dl>
          </div>
             </Collapse.Panel>
             )
          })
        } 
      </Collapse> 
      <div style={{zIndex:11,width:'100%',position:'fixed',bottom:'0',display:'flex',justifyContent:'space-evenly',alignItems:'center', height:"45px",backgroundColor:'#fff'}}>
         <Switch
            checked={isSpeed}
            onChange={
              () => {
                setIsSpeed(!isSpeed)
                setList([])
                setPage(1)
              }
            }
          />是否高铁
           <Switch
            checked={isSeat}
            onChange={
              () => {
                setIsSeat(!isSeat)
                setList([])
                setPage(1)
              }
            }
          />是否有票
      </div>
      
      <InfiniteScroll loadMore={getData} hasMore={true} />
    </div>
  )
}

export default Websock(index)